<template>
  <div>
    <el-container>
      <el-aside width="300px">
        <tree @singleClickData="getSingleClickData" />
      </el-aside>

      <el-main>

        <div class="tableList">

          <div class="filter-container">
            <el-row :gutter="20" style=" align-items: center; justify-content: center; display: flex;">
              <el-col :span="3">
                <el-button class="filter-item" type="primary" icon="el-icon-edit" :disabled="isAdd" @click="handleCreate">{{ $t('common.add') }}</el-button>
              </el-col>
              <el-col :span="6">
                <template>
                  <el-radio v-model="searchType" label="1">管理端</el-radio>
                  <el-radio v-model="searchType" label="2">客户端</el-radio>
                </template>
              </el-col>
              <el-col :span="12">
                <search :search-type="searchType" @queryData="getSingleClickData"/>
              </el-col>
            </el-row>

          </div>

          <el-header style="display: inline-block; width: 100%; text-align: center">数据类型:{{ dataTitle }} ||  编码:({{ dataCode }})</el-header>

          <el-button style="margin-bottom: 10px;" type="danger" size="mini" @click="batchDelete">{{ $t('common.batch') + $t('common.del') }}</el-button>

          <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            :element-loading-text="$t('common.loading')"
            border
            fit
            highlight-current-row
            style="width: 100%"
            @selection-change="selectionGetRow"
          >

            <el-table-column width="60px" type="selection" align="center" />

            <!--<el-table-column type="index" width="120px" align="center" :label="$t('common.sortNumber')"></el-table-column>-->

            <el-table-column align="center" :label="$t('common.sortNumber')" prop="code">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <span>{{ scope.row.seq }}</span>
                  <div slot="reference" class="name-wrapper">
                    <span>{{ scope.row.seq }}</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column align="center" :label="$t('common.code')" prop="code">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <span>{{ scope.row.code }}</span>
                  <div slot="reference" class="name-wrapper">
                    <span>{{ scope.row.code }}</span>
                  </div>
                </el-popover>

              </template>
            </el-table-column>

            <el-table-column width="120px" align="center" :label="$t('common.value')" prop="value">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <span>{{ scope.row.value }}</span>
                  <div slot="reference" class="name-wrapper">
                    <span>{{ scope.row.value }}</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column width="120px" align="center" :label="$t('common.enabled')">
              <template slot-scope="scope">
                <span>{{ scope.row.isEnabled ? "是" : "否" }}</span>
              </template>
            </el-table-column>

            <el-table-column width="120px" align="center" :label="$t('common.description')">
              <template slot-scope="scope">
                <span>{{ scope.row.description }}</span>
              </template>
            </el-table-column>

            <el-table-column width="220px" align="center" :label="$t('common.handle')" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('common.edit') }}</el-button>
                <el-button type="danger" size="mini" @click="deleteDictionaryData(scope.row)">{{ $t('common.del') }}</el-button>
              </template>
            </el-table-column>

          </el-table>

          <!--分页-->
          <div class="pagination-container">
            <el-pagination background :current-page="listQuery.pageNumber" :page-sizes="[5,10,15, 20]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>

      </el-main>
    </el-container>

    <el-dialog title="数据类型" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" style="width: 400px; margin-left:50px;">

        <!--<el-form-item :label="$t('entity.area.name')"  prop="name">-->
        <!--<el-input v-model="temp.name" type="text" prefix-icon="el-icon-edit" clearable :placeholder="$t('entity.area.name')"></el-input>-->
        <!--</el-form-item>-->

        <el-form-item :label="$t('entity.area.code')" prop="code">
          <el-input v-model="temp.code" type="text" prefix-icon="el-icon-edit" clearable :placeholder="$t('entity.area.pickCode')" />
        </el-form-item>

        <el-form-item :label="'值'" prop="value">
          <el-input v-model="temp.value" type="text" prefix-icon="el-icon-edit" clearable placeholder="请数入值" />
        </el-form-item>

        <el-form-item :label="'序号'" prop="seq">
          <el-input v-model="temp.seq" type="text" prefix-icon="el-icon-edit" clearable placeholder="请数入序号" />
        </el-form-item>

        <el-form-item :label="'是否启用'" prop="isEnabled">
          <el-switch v-model="temp.isEnabled" active-text="是" inactive-text="否" />
        </el-form-item>

        <el-form-item :label="$t('common.description')" prop="description">
          <el-input v-model="temp.description" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :placeholder="$t('common.pickDescription')" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('common.cancel') }}</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{ $t('common.confirm') }}</el-button>
        <el-button v-else type="primary" @click="updateData">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getDictionaryData, saveDictionaryData, updateDictionaryData } from '@/api/common'
import { codeValidation } from '@/methods/codeValidation'

import search from './search'
import { generalRemoveR } from '@/methods/apiGeneral'
import tree from './tree'

export default {
  name: 'DataDictionary',
  components: {
    tree,
    search
  },
  data() {
    return {
      list: [],
      total: 0,
      tableKey: 0,
      listLoading: false,
      searchType: '1',
      dialogStatus: 'create',
      dialogFormVisible: false,

      temp: {
        id: '',
        dictionaryFolderId: '',
        parentId: '',
        name: '',
        code: '',
        value: '',
        isEnabled: true,
        description: '',
        seq: 0
      },

      // 表达验证
      rules: {
        seq: [
          { required: true, pattern: /^[0-9]+.?[0-9]*$/, message: '请输入序号(数字)', trigger: 'blur' }
        ]
      },

      // 用来判断添加按钮是否可用
      isAdd: true,

      // 存储点击选择的数据字典的data
      dataTemp: [],

      // 存储点击选择的数据字典 父级 ID
      parentId: '',
      dataTitle: '',
      dataCode: '',

      listQuery: {
        pageNumber: 1,
        pageSize: 5
      },

      multipleSelection: [],
      sMultipleSelection: ''

    }
  },
  created() {

  },

  methods: {

    // 批量删除 类型数据
    batchDelete() {
      var multipleSelection = this.multipleSelection
      var location = 'dictionaryData'
      var self = this
      generalRemoveR(multipleSelection, location, self)
    },

    // 复选框选择执行 拿到选中的 ID , 并且 转成已逗号隔开的字符串
    selectionGetRow(val) {
      this.multipleSelection = val
      const dataTemp = []
      for (let i = 0; i < val.length; i++) {
        dataTemp.push(val[i].id)
      }
      this.sMultipleSelection = dataTemp.join()
    },

    // 拿到某条数据类型点击的数据
    getSingleClickData(data) {
      this.dataTemp = data
      this.dataTitle = data.name
      this.dataCode = data.code
      this.getDictionaryDataList(data)
      this.isAdd = false
    },

    // 数据字典 / 新增字典数据
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.temp.id = ''
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },

    // 打开编辑单条数据输入域
    handleUpdate(row) {
      this.temp = row
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },

    // 新增字典数据
    createData() {
      var self = this
      this.temp.parentId = this.dataTemp.id
      this.temp.dictionaryFolderId = self.Util.nullToString(this.dataTemp, 'dictionaryFolderId')
      saveDictionaryData(this.temp).then(response => {
        var code = response.data.code
        var content = response.data.content
        if (code === '0000') {
          this.dialogFormVisible = false
          this.listQuery.pageNumber = 1
          this.getDictionaryDataList(this.dataTemp)
        }
        codeValidation(code, content, self)
      })
    },

    // 编辑单条字典数据
    updateData() {
      var self = this
      const tempData = Object.assign({}, this.temp)
      updateDictionaryData(tempData).then(response => {
        var code = response.data.code
        var content = response.data.contant
        if (code === '0000') {
          this.dialogFormVisible = false
          this.getDictionaryDataList(this.dataTemp)
        }
        codeValidation(code, content, self)
      })
    },

    // 获取字典第一层级数据
    getDictionaryDataList(data) {
      var self = this
      this.parentId = data.id
      var temp = {
        parentId: data.id,
        pageSize: this.listQuery.pageSize,
        pageNumber: this.listQuery.pageNumber
      }
      getDictionaryData(temp).then(response => {
        var pageInfo = response.data.pageInfo
        this.list = pageInfo.list
        this.total = pageInfo.total
        this.listLoading = false
      })
    },

    // 删除数据类型
    deleteDictionaryData(data) {
      var dataTemp = [{ id: data.id }]

      var location = 'dictionaryData'
      var self = this
      generalRemoveR(dataTemp, location, self)
    },

    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getDictionaryDataList(this.dataTemp)
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getDictionaryDataList(this.dataTemp)
    },
    handleCurrentChange(val) {
      this.listQuery.pageNumber = val
      this.getDictionaryDataList(this.dataTemp)
    }
  }
}
</script>

<style>
  .tableList{
    /*float: left;*/
    padding-left: 10px;
    padding-top: 10px;
  }
</style>
